<template>
    <div class="he poa">
        <top @rightfn="set_router" :right="'el-icon-more'" :title="'我的'" />
        <div class="gun">
            <div v-if="!obj">
                <div class="login_top_title">
                    登录社区，体验更多功能
                </div>
                <div @click="login" class="login_bottom_title">
                    <span>账号/邮箱/手机登录 </span>
                    <span class="el-icon-arrow-right"></span>
                </div>
            </div>
            <div v-else ref="user" v-bac class="user_main">
                <div class="user_img">
                    <img :src="obj.userpic ? obj.userpic : 'http://43.138.15.137:8085/static/default.jpg'">
                </div>
                <div class="user_main_center">
                    <div class="t">{{ obj.phone }}</div>
                    <div class="b">总帖子{{ res.post_count }},今日发帖{{ res.today_posts_count }}</div>
                </div>
                <div class="right">
                    <span class="el-icon-arrow-right"></span>
                </div>
            </div>
            <div class="tab">
                <div>
                    <span>{{ res.post_count ? res.post_count : '0' }}</span>
                    <div>帖子</div>
                </div>
                <div>
                    <span>{{ res.post_count ? res.post_count : '0' }}</span>
                    <div>动态</div>
                </div>
                <div>
                    <span>{{ res.comments_count ? res.comments_count : '0' }}</span>
                    <div>评论</div>
                </div>
                <div>
                    <span>{{ res.withfen_count ? res.withfen_count : '0' }}</span>
                    <div>粉丝</div>
                </div>
            </div>
            <div class="img">
                <img src="http://43.138.15.137:8085/static/demo/banner1.jpg">
            </div>
            <div v-bac class="list">
                <div class="icon el-icon-view"></div>
                <div class="center">浏览历史</div>
                <div class="right el-icon-arrow-right"></div>
            </div>
            <div v-bac class="list">
                <div class="icon el-icon-info"></div>
                <div class="center">社区认证</div>
                <div class="right el-icon-arrow-right"></div>
            </div>
            <div v-bac class="list">
                <div class="icon el-icon-medal"></div>
                <div class="center">审核帖子</div>
                <div class="right el-icon-arrow-right"></div>
            </div>
            <div class="bt"></div>
        </div>
    </div>
</template>
<script>
import top from './common/top.vue'
export default ({
    components: {
        top,
    },
    data() {
        return {
            obj: false,
            res: {},
        }
    },
    created() {
        if (localStorage.getItem('token')) {
            this.obj = JSON.parse(localStorage.getItem('token'))
            this.$http({
                url: `http://43.138.15.137:8085/api/user/getcounts/${this.obj.id}`,
                method: 'get',
            }).then(res => {
                if (res.data.msg = '获取成功') {
                    this.res = res.data.data
                }
            })
        }
    },
    methods: {
        set_router(){
            this.$router.push('/set')
        },
        login() {
            this.$router.push('/login')
        }
    }
})
</script>
<style scoped lang="scss">
@function r($v) {
    @return $v / (390 /10rem)
}

.login_top_title {
    padding: r(12) 0;
    font-size: r(18);
    text-align: center;
}

.login_bottom_title {
    margin-top: r(50);
    font-size: r(18);
    color: #6c757d;
    text-align: center;
}

.list {
    display: flex;
    width: 100%;
    padding: r(20) r(18);
    align-items: center;
    justify-content: space-between;

    .icon {
        font-size: r(14);
    }

    .center {
        font-size: r(22);
        margin-left: r(14);
        flex: 1;
    }

    .right {
        font-size: r(16);
        color: rgb(187, 187, 187);
    }
}

.img {
    padding: r(20) r(18);

    img {
        height: r(110);
        border-radius: r(6);
        width: 100%;
        object-fit: cover;
    }
}

.tab {
    padding: r(24) r(10);
    display: flex;

    div {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;

        span {
            height: r(45);
            display: flex;
            align-items: center;
            font-size: r(24);
            font-weight: bold;
        }

        div {
            width: 100%;
            height: r(55);
            display: flex;
            align-items: center;
            color: #6c757d;
            font-size: r(20);
            margin-top: r(5);
        }
    }
}

.user_main {
    padding: r(16);
    display: flex;
    align-items: center;
    height: r(80);
    box-sizing: content-box;
    position: relative;

    .right {
        position: absolute;
        right: r(16);
        top: 50%;
        transform: translateY(-50%);
        font-size: r(18);
        color: #6c757d;
    }

    .user_main_center {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100%;
        margin: 0 r(8);

        .t {
            font-size: r(26);
            font-weight: 700;
            color: #343a40;
        }

        .b {
            font-size: r(18);
            color: #6c757d;
        }
    }

    .user_img {
        display: flex;
        align-self: center;

        img {
            border-radius: 50%;
            width: r(65);
            height: r(65);
        }
    }
}</style>